<template>
  <SuperTable ref="superTableRef"  search pager border align="center" :columns="columns" :data-request="fetchData" :export-config="{}" :header-title="`${$t('specimen.topic')}管理`">
    <template #action>
      <Button type="primary" @click="showModalFn(true)">新增项目</Button>
    </template>
  </SuperTable>

  <DraggableModal v-model:visible="showModal" :title="`${modalType ? '新增' : '修改'}${$t('specimen.topic')}`" :maskClosable="true" @ok="modalOkFn" @cancel="modalCancelFn">
    <Form ref="formRef" :model="modalState.currentData" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-form-item :label="`${$t('specimen.topic')}组编号`" name="serial" :rules="[{ required: true, message: '数据必填!' }]">
        <Input v-model:value="modalState.currentData.serial" />
      </a-form-item>

      <a-form-item :label="`${$t('specimen.topic')}组名称`" name="name" :rules="[{ required: true, message: '数据必填!' }]">
        <Input v-model:value="modalState.currentData.name" />
      </a-form-item>

      <a-form-item :label="`${$t('specimen.topic')}组负责人`" name="leader" :rules="[{ required: true, message: '数据必填!' }]">
        <Select v-model:value="modalState.currentData.leader" :options="userList" />
      </a-form-item>

      <a-form-item label="描述">
        <Input v-model:value="modalState.currentData.desp" />
      </a-form-item>
    </Form>
  </DraggableModal>
</template>

<script setup lang="ts">
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import { VxeGridPropTypes } from 'vxe-table';
import type { TableColumnItem } from './columns';
import { baseColumns } from './columns';
import { reactive, ref } from 'vue';
import { taskSearch, taskDelete, taskAdd, taskUpdate } from '@/api/base/task-data';
import Button from '@/framework/components/basic/button/button.vue';
import { i18n } from '@/locales';
import { message, Form, Input, Select } from 'ant-design-vue';
import { userList } from './columns';

/**
 * modal
 */
const modalState = reactive({
  currentData: {},
});
const modalType = ref(false); // true：添加 false：编辑
const showModal = ref(false);
const showModalFn = (isAdd = false) => {
  modalType.value = isAdd ? true : false;
  showModal.value = true;
};
const modalOkFn = async () => {
  await formRef.value?.validateFields();
  let params = {
    ...modalState.currentData,
    status: 1,
  };
  if (modalType.value) {
    await taskAdd(params);
  } else {
    const id = params.id;
    delete params.id;
    await taskUpdate(id, params);
  }
  message.success('操作成功！');
  refreshTableFn();
  showModal.value = false;
  modalCancelFn();
};
const modalCancelFn = () => {
  formRef.value?.resetFields();
  modalState.currentData = {};
};
/**
 * form
 */
const formRef = ref();
/**
 * table
 */
const superTableRef = ref<InstanceType<typeof SuperTable>>();
const columns: TableColumnItem[] = [
  ...baseColumns,
  {
    title: '操作',
    field: '$action',
    hideInSearch: true,
    align: 'center',
    fixed: 'right',
    width: 200,
    actions: ({ row }) => [
      {
        label: '修改',
        onClick: () => {
          modalState.currentData = {
            id: row.id,
            desp: row.desp,
            leader: userList.value?.find((item) => item.value === row.leader) ? row.leader : undefined,
            name: row.name,
            serial: row.serial,
          };
          showModalFn();
        },
      },
      {
        label: '删除',
        popConfirm: {
          title: `确认要删除该${i18n.global.t('specimen.topic')}？`,
          onConfirm: async () => {
            await taskDelete(row.id);
            message.success('操作成功！');
            refreshTableFn();
          },
        },
      },
    ],
  },
];
const fetchData = async (ori: VxeGridPropTypes.ProxyAjaxQueryParams) => {
  let data = superTableRef.value?.getFormModel();
  let params = {
    pageSize: ori.page.pageSize,
    pageNum: ori.page.currentPage,
    orderBy: [
      {
        field: 'createTime',
        order: 'desc',
      },
    ],
    ...data,
  };
  let res = await taskSearch(params);
  return res.result;
  // return {
  //   data: [{}, {}, {}],
  //   pageIndex: 1,
  //   pageSize: 10,
  //   total: 100,
  // };
};
const refreshTableFn = () => {
  superTableRef.value?.refreshTable();
};
</script>

<style scoped lang="less"></style>
